<template>
    <header>
        <div class="head-container">
            <!-- Login -->
            <div class="logo">
                <router-link :to="{ name: 'Home' }">
                    <img src="../images/logo.png" alt="主页">
                </router-link>
            </div>
            <!-- 分类导航 -->
            <ul class="nav">
                <li><router-link :to="{ name: 'Home' }" :class="{ active: $route.path === '/' }">首页</router-link></li>
                <li v-for="(item, i) in channels.slice(1)" :key="i">
                    <router-link 
                    :to="{ 
                        name: 'ChannelNews',
                        params: {
                            action: item.action,
                            page: 1
                        }
                     }" :class="{ active: item.action === $route.params.action }">{{ item.name }}</router-link>
                </li>
            </ul>
            <!-- 用户登录注册、头像、注销 -->
            <div class="user">
                <router-link to="/user" v-if="loginUser" v-text="loginUser.username"></router-link>
                <a v-if="loginUser" @click="logOut">注销</a>
                <router-link :to="{ name: 'Login' }" v-if="!loginUser" >登录</router-link>
                <router-link :to="{ name: 'Register' }" v-if="!loginUser" >注册</router-link>
            </div>
        </div>
    </header>
</template>

<script>

export default {
    computed: {
        channels() {
            return this.$store.state.channels.data;
        },
        loginUser() {
            return this.$store.state.loginUser.data;
        }
    },
    methods: {
        logOut() {
            this.$store.commit('loginUser/setLoginUser', null);
        }
    }
}
</script>

<style scoped>
@import url('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

header {
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1c2327cc;
    width: 100%;
    z-index: 100;
}
.head-container {
    width: 1140px;
    height: 100%;
    margin: 0 auto;
    display: flex;
}
header a {
    color: #ffffff;
    text-decoration: none;
}
.logo {
    height: 100%;
    flex: 1;
    box-sizing: border-box;
}
.logo img {
    height: 100%;
}
.nav {
    flex: 6;
    list-style: none;
    padding: 0;
    display: flex;
}
.nav a, .user a {
    display: inline-block;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
}
.nav a:hover, .user a:hover, .user a.router-link-exact-active, .nav a.active {
    background-color: #000;
}
.user {
    text-align: right;
}
</style>